<template>
  <view class="layout-box" :style="layoutBoxStyle">
    <view class="top-bar">
      <view class="left-btn">
        <image src="./icon/icon-back.png" class="icon-back" />
      </view>
      <view class="title">确认订单</view>
      <view class="right-btn"></view>
    </view>
    <view class="address-box">
      <view class="address-item active">
        <view class="icon">
          <image src="./icon/icon-shop.png" class="img" />
        </view>
        <view class="text">
          海王星辰(虎门太宝店健康药房)
          <view class="tag">医保店</view>
        </view>
        <view class="arrow"></view>
      </view>
      <view class="address-item">
        <view class="icon">
          <image src="./icon/icon-address.png" class="img" />
        </view>
        <view class="text">东莞市虎门镇太宝路25号</view>
        <view class="arrow"></view>
      </view>
      <view class="address-item">
        <view class="icon">
          <image src="./icon/icon-phone.png" class="img" />
        </view>
        <view class="text">0769-85245322</view>
        <view class="arrow"></view>
      </view>
    </view>
    <view class="goods-box">
      <view class="title">医保药品目录</view>
      <view class="goods-list">
        <view class="goods-item">
          <view class="top">
            <view class="tag">医保</view>
            <view class="name">[石药]复方熊胆薄荷含片10片*2板/盒</view>
          </view>
          <view class="bottom">
            <view>x4</view>
            <view>￥100.00</view>
          </view>
        </view>
      </view>
      <view class="price-desc">
        <view class="item">预估医保支付:￥25.4</view>
        <view class="item">自费支付: ￥ 0</view>
        <view class="item">(医保支付金额以实际结算结果为准)</view>
      </view>
      <view class="price-total">
        共1件，合计: <text class="price">￥25.40</text>
      </view>
    </view>

    <view class="bottom-btn">
      医保支付
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
const layoutBoxStyle = computed(() => ({
  paddingTop: `${uni.getSystemInfoSync().statusBarHeight}px`
}))
</script>

<style lang="scss" scoped>
.layout-box{
  background-color: #f5f5f5;
  height: 100vh;
  background-image: linear-gradient(to bottom, rgb(84,185,163) 15%, rgb(247,247,247) 24%);
  padding: 0 30rpx 0 30rpx;
}
.top-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  padding: 0 32rpx;
  color: #fff;
  font-size: 32rpx;

  .icon-back{
    width: 36rpx;
    height: 36rpx;
  }
}

.address-box{
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 30rpx;
  padding: 20rpx 0;
}

.address-item{
  display: flex;
  align-items: center;
  height: 52rpx;
  padding: 0 32rpx;
  color: #7c7b7b;
  font-size: 26rpx;
  margin-bottom: 10rpx;

  .icon{
    width: 30rpx;
    height: 30rpx;
    margin-right: 24rpx;
    .img{
      width: 100%;
      height: 100%;
    }
  }

  &.active{
    .text{
      color: #333;
      font-size: 30rpx;
      font-weight: 700;
    }
    .icon{
      width: 36rpx;
      height: 36rpx;
      margin-right: 18rpx;
    }
  }
}
.tag{
  display: inline-block;
  background-color: #54B9A3;
  color: #fff;
  border-radius: 6rpx;
  font-size: 24rpx;
  padding: 0 8rpx;
  margin-left: 22rpx;
}

.goods-box{
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;

  .title{
    font-size: 30rpx;
    font-weight: 700;
    margin-bottom: 30rpx;
  }
}
.goods-list{
  background-color: #F7FFFC;
  border: 1px solid #c5fae7;
  padding: 30rpx;
  border-radius: 12rpx;
}
.goods-item{
  font-size: 28rpx;
  font-weight: 700;

  .tag{
    margin-left: 0;
    margin-right: 10rpx;
  }
  .top{
    display: flex;
    align-items: center;
  }
  .bottom{
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
  }
}

.price-desc{
  font-size: 26rpx;
  font-weight: 700;
  margin-top: 30rpx;
  color: #333333;
  border-top: 1px solid #CCC;
  padding-top: 30rpx;
  padding-bottom: 30rpx;

  .item{
    text-align: right;
    margin-bottom: 16rpx;
  }
}

.price-total{
  font-size: 26rpx;
  color: #999;
  text-align: right;
  border-top: 1px solid #CCC;
  padding-top: 40rpx;
  padding-bottom: 20rpx;

  .price{
    color: #F00;
    font-size: 32rpx;
    font-weight: 700;
  }
}
.bottom-btn{
  background-color: #54B9A3;
  color: #FFF;
  font-size: 32rpx;
  font-weight: 700;
  border-radius: 44rpx;
  text-align: center;
  height: 88rpx;
  line-height: 88rpx;
  position: fixed;
  bottom: 88rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 94vw;
}
</style>
